import React from 'react';
import {
  Card,
  Row,
  Col,
  Statistic,
  Typography,
  Tabs,
  Table,
  Tag,
  Button,
  Space,
  Timeline
} from 'antd';
import {
  LineChartOutlined,
  PieChartOutlined,
  ProfileOutlined,
  ShoppingOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;

const PortfolioDetail = ({ portfolio }) => {
  // 如果未传入portfolio，则使用本地mock数据
  const mockData = [
    {
      portfolioInfo: {
        id: 'P001',
        name: '稳健增长FOF组合',
        riskLevel: '中风险',
        creator: '王牌投顾团队',
        onShelfDate: '2024-01-20',
        netValue: '1.1023',
        dailyChange: '0.56',
        totalReturn: '12.34',
        benchmarkReturn: '10.12'
      },
      components: [
        { key: '000001', code: '000001', name: '华夏成长混合', weight: 30, netValue: '1.1023', dailyChange: '0.56' },
        { key: '000002', code: '000002', name: '易方达消费行业', weight: 30, netValue: '1.0876', dailyChange: '-0.12' },
        { key: '000006', code: '000006', name: '广发稳健增长', weight: 40, netValue: '1.1345', dailyChange: '0.23' }
      ],
      holdings: [
        { key: 1, fund: '华夏成长混合', stockCode: '600519', stockName: '贵州茅台', holdingWeight: 10, assetType: '股票' },
        { key: 2, fund: '易方达消费行业', stockCode: '000651', stockName: '格力电器', holdingWeight: 8, assetType: '股票' }
      ],
      tradeHistory: [
        { time: '2024-01-20 09:30', content: '组合产品正式上架' },
        { time: '2024-01-20 10:00', content: '首次资金申购' }
      ]
    },
    {
      portfolioInfo: {
        id: 'P002',
        name: '全球科技先锋策略',
        riskLevel: '高风险',
        creator: '海外投资部',
        onShelfDate: '2024-01-19',
        netValue: '1.2034',
        dailyChange: '-0.34',
        totalReturn: '25.67',
        benchmarkReturn: '20.45'
      },
      components: [
        { key: '513100', code: '513100', name: '纳斯达克100ETF', weight: 70, netValue: '1.2034', dailyChange: '-0.34' },
        { key: '159915', code: '159915', name: '创业板ETF', weight: 30, netValue: '1.1567', dailyChange: '0.45' }
      ],
      holdings: [
        { key: 1, fund: '纳斯达克100ETF', stockCode: 'AAPL', stockName: '苹果公司', holdingWeight: 12, assetType: '股票' },
        { key: 2, fund: '创业板ETF', stockCode: '300750', stockName: '宁德时代', holdingWeight: 9, assetType: '股票' }
      ],
      tradeHistory: [
        { time: '2024-01-19 09:30', content: '组合产品正式上架' },
        { time: '2024-01-19 10:00', content: '首次资金申购' }
      ]
    },
    {
      portfolioInfo: {
        id: 'P003',
        name: '大类资产轮动',
        riskLevel: '中风险',
        creator: '量化策略组',
        onShelfDate: '2024-01-18',
        netValue: '1.0456',
        dailyChange: '0.12',
        totalReturn: '15.23',
        benchmarkReturn: '13.56'
      },
      components: [
        { key: '510300', code: '510300', name: '沪深300ETF', weight: 50, netValue: '1.0456', dailyChange: '0.12' },
        { key: '511010', code: '511010', name: '国债ETF', weight: 50, netValue: '1.0234', dailyChange: '-0.08' }
      ],
      holdings: [
        { key: 1, fund: '沪深300ETF', stockCode: '600036', stockName: '招商银行', holdingWeight: 7, assetType: '股票' },
        { key: 2, fund: '国债ETF', stockCode: '019623', stockName: '国债2023', holdingWeight: 15, assetType: '债券' }
      ],
      tradeHistory: [
        { time: '2024-01-18 09:30', content: '组合产品正式上架' },
        { time: '2024-01-18 10:00', content: '首次资金申购' }
      ]
    }
  ];
  const data = portfolio || mockData[0];
  if (!data) return <div style={{padding: 24}}>未找到组合信息</div>;
  const { portfolioInfo, components, holdings, tradeHistory } = data;

  const componentColumns = [
    { title: '基金代码', dataIndex: 'code', key: 'code' },
    { title: '基金名称', dataIndex: 'name', key: 'name' },
    { title: '配置权重', dataIndex: 'weight', key: 'weight' },
    { title: '最新净值', dataIndex: 'netValue', key: 'netValue' },
    { title: '日涨跌', dataIndex: 'dailyChange', key: 'dailyChange', render: val => <span style={{ color: val > 0 ? '#ff4d4f' : '#3f8600' }}>{val}%</span> },
  ];

  const holdingColumns = [
    { title: '所属基金', dataIndex: 'fund', key: 'fund' },
    { title: '标的代码', dataIndex: 'stockCode', key: 'stockCode' },
    { title: '标的名称', dataIndex: 'stockName', key: 'stockName' },
    { title: '持仓权重(占基金)', dataIndex: 'holdingWeight', key: 'holdingWeight' },
    { title: '资产类型', dataIndex: 'assetType', key: 'assetType', render: t => <Tag color="purple">{t}</Tag> },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>{portfolioInfo.name} <Tag color="success">已上架</Tag></Title>
      <Paragraph type="secondary">由 {portfolioInfo.creator} 管理，上架日期：{portfolioInfo.onShelfDate}</Paragraph>

      <Card style={{ marginBottom: 24 }}>
        <Row>
          <Col span={6}>
            <Statistic title="最新净值" value={portfolioInfo.netValue} precision={4} />
          </Col>
          <Col span={6}>
            <Statistic
              title="日涨跌"
              value={portfolioInfo.dailyChange}
              precision={2}
              valueStyle={{ color: portfolioInfo.dailyChange > 0 ? '#ff4d4f' : '#3f8600' }}
              prefix={portfolioInfo.dailyChange > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
              suffix="%"
            />
          </Col>
          <Col span={6}>
            <Statistic title="累计收益率" value={portfolioInfo.totalReturn} precision={2} suffix="%" />
          </Col>
          <Col span={6}>
            <Statistic title="基准累计收益" value={portfolioInfo.benchmarkReturn} precision={2} suffix="%" />
          </Col>
        </Row>
      </Card>

      <Row gutter={24}>
        <Col span={18}>
          <Card>
            <Tabs defaultActiveKey="1">
              <TabPane tab={<span><LineChartOutlined />业绩走势</span>} key="1">
                <div style={{ height: 300, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Paragraph type="secondary">净值走势图 (模拟)</Paragraph>
                </div>
              </TabPane>
              <TabPane tab={<span><PieChartOutlined />成份列表</span>} key="2">
                <Table dataSource={components} columns={componentColumns} pagination={false} rowKey="key" />
              </TabPane>
              <TabPane tab={<span><ProfileOutlined />详细持仓</span>} key="3">
                <Table dataSource={holdings} columns={holdingColumns} pagination={false} rowKey="key" />
              </TabPane>
               <TabPane tab={<span><ProfileOutlined />交易动态</span>} key="4">
                    <Timeline style={{marginTop: 20}}>
                        {tradeHistory.map(item => (
                            <Timeline.Item key={item.time}><b>{item.time}</b>: {item.content}</Timeline.Item>
                        ))}
                    </Timeline>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="产品操作">
            <Paragraph>风险等级: <Tag color="red">{portfolioInfo.riskLevel}</Tag></Paragraph>
            <Paragraph>这是一个为高风险偏好投资者设计的组合产品。</Paragraph>
            <Button type="primary" icon={<ShoppingOutlined />} block>
              签约订购此产品
            </Button>
            <Button type="default" block style={{marginTop: 16}}>
              加入对比
            </Button>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default PortfolioDetail; 